@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
*
{
    margin: 0;
    padding: 0;
    /* font - family属性指定一个元素的字体 */
    font-family: 'Poppins', sans-serif; 
}

body
{
    background: #000 url(bg.jpg);
    /* background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。 
    fixed:背景图片不会随着页面的滚动而滚动。*/
    background-attachment: fixed;
    /* background-blend-mode 属性定义了背景层的混合模式（图片与颜色） */
    background-blend-mode: hard-light;
}

.container{
    position: absolute;
    top: 80px;
    left: 100px;
    right: 100px;
    bottom: 80px;
    background: url(bg.jpg);
    /* background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。 
    fixed:背景图片不会随着页面的滚动而滚动。*/
    background-attachment: fixed;
    /* display 属性规定元素应该生成的框的类型 */
    display: flex;
    /* justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。 */
    justify-content: center;
    align-items: center;
    /* flex-direction 属性规定灵活项目的方向。
    column:灵活项目将垂直显示 */
    flex-direction: column;
    box-shadow: 0 50px 50px rgba(0,0,0,0.5),
                0 0 0 100px rgba(0,0,0,.1);
}

.container h2 {
    text-align: center;
    font-size: 10em;
    line-height: 0.7em;
    color: #333;
    margin-top: -80px;
}

.container h2 span{
    display: block;
    font-weight: 300;
    /* letter-spacing 属性增加或减少字符间的空白（字符间距） */
    letter-spacing: 6px;
    font-size: 0.2em;
}
.countdown{
    display: flex;
    margin-top: 50px;
}
.countdown div{
    position: relative;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background: #333;
    color: #fff;
    margin: 0 15px;
    font-size: 3em;
    font-weight: 500;
}
/* :before 选择器向选定的元素前插入内容。 */
.countdown div:before{
    content: '';
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    height: 35px;
    background: #ff0;
    color: #333;
    font-size: 0.35em;
    line-height: 35px;
    font-weight: 300;
}
.container #day:before{
    /* content 属性与 :before 及 :after 伪元素配合使用，来插入内容。 */
    content: 'Days';
}
.container #hour:before{
    content: 'Hours';
}
.container #minute:before{
    content: 'Minutes';
}
.container #second:before{
    content: 'Seconds';
}
